<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>咱们的乐购商城</title>
    <!-- 引入重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入通用样式 -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入自己的样式 头部 -->
    <link rel="stylesheet" href="./css/header.css">
    <!-- 引入自己的样式 头部 -->
    <link rel="stylesheet" href="./css/register.css">
    <!-- 引入jquery -->
    <script src="js/lib/jquery.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入验证器 -->
    <script src="./js/lib/jquery.validate.min.js"></script>
    <!-- 引入自己的JS -->
    <script src="./js/register.js"></script>



</head>

<body>
    <header class="">
        <!-- 第一行 -->
        <div class="first-bar full-container">
            <div class="center clear-fix">
                <img src="./images/logo.jpg" alt="">
                <p class="fl"><a href="#" class="font-white">legochina.cn</a></p>
                <p class="fr">欢迎光临<span class="theme-color">乐购</span>,请<span>登录</span>\<span
                        class="theme-color">注册</span></p>
            </div>
        </div>
        <!-- 搜索框 -->
        <div class="center clear-fix">
            <div class="fr clear-fix search-box">
                <form id="sub-form" action="" class="fl">
                    <input type="text">
                    <input type="submit" value="" class="theme-bg">
                </form>

                <div class="fl">
                    购物车<span>3</span>
                </div>
                <div class="fl">
                    我的订单
                </div>
            </div>
        </div>
        <!-- 导航栏 -->
        <div class="nav-bar center">
            <ul class="clear-fix">
                <li>图书</li>
                <li>电子书</li>
                <li>原创文学</li>
                <li>服装</li>
                <li>运动户外</li>
                <li>儿童装</li>
                <li>家居</li>
                <li>创意文具</li>
                <li>地方特产</li>
                <li>海外购</li>
                <li>电器城</li>
            </ul>
        </div>
    </header>

    <main>

        <section class="register-box center">
            <form id="register-form" action="" class="center" >
                <div>
                    <label for="uname">用户名</label>
                    <input type="text" name="uname" id="uname" placeholder="您的账户和登录名" />
                </div>
                <div>
                    <label for="pwd">设置密码</label>
                    <input type="password" name="pwd" id="pwd" placeholder="建议设置两种字符密码" />
                </div>
                <div>
                    <label for="confirmPwd">确认密码</label>
                    <input type="text" name="confirmPwd" id="confirmPwd" placeholder="再次输入密码" />
                </div>
                <div>
                    <label for="tel">中国+86</label>
                    <input type="text" name="tel" id="tel" placeholder="建议使用常用手机号" />
                </div>
                <div>
                    <label for="email">邮箱</label>
                    <input type="text" name="email" id="email" placeholder="请输入邮箱" />
                </div>
                <div class="vcode-box">
                    <label for="pvcode">手机验证码</label>
                    <input type="text" name="vcode" id="vcode" placeholder="请输入手机验证码" />
                    <button>获取验证码</button>
                </div>

                <div class="clear-fix">
                    <input type="checkbox" name="isAgree" class="checkbox-agree fl">
                    <p class="fl" >我已阅读并同意<span>《乐购用户注册协议》</span></p>
                </div>
                <button id="submit-btn">立即注册</button>
            </form>

        </section>

    </main>

    <footer class="center">
        <img src="./images/footer.png" alt="">
    </footer>

</body>

</html>